<template>
  <div id="myChart" :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'
  import {mapData} from "@/assets/mapData"

  export default {
    mixins: [resize],
    props: {
        className: {
        type: String,
        default: 'cmap'
        },
        width: {
        type: String,
        default: '100%'
        },
        height: {
        type: String,
        default: '300px'
        }
    },
    data() {
        return {
        cmap: {}
        }
    },
    mounted() {
        echarts.registerMap("chinaMap",mapData); //使用registerMap注册的地图名称
        this.$nextTick(() => {
        this.initCmap()
        })
    },
    beforeDestroy() {
        if (!this.cmap) {
        return
        }
        this.cmap.dispose()
        this.cmap = null
    },
    methods: {
        initCmap() {
        this.cmap = echarts.init(this.$el)
        this.cmap.setOption({

                geo:{ //地理坐标组件，地理坐标组件用于地图的绘制
                    type:"map",
                    map:"chinaMap",//使用registerMap注册的地图组件
                    roam:true,//是否开启鼠标缩放和平移漫游
                    zoom:10,//当前视角的缩放比例
                    center:[108.956339,34.268309],//当前视角的中心点，用经纬度表示
                    // label:{//地图上显示文字提示信息
                    //     show:false,
                    //     color:"#ff6600",
                    //     fontsize:10
                    // },
                    // itemStyle:{//地图区域的多边形
                    //     areaColor:"#ff6600"
                    // }
                },
            })
        }
    },
  }
</script>
